<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="js.js"></script>
		<link rel="stylesheet" type="text/css" href="css.css" />
	</head>
	<body>
		<div id="topo">Sistema de Lanchonete</div>
		<br />
		<span style="float: right;">Bem vindo, Sr(a). Cliente</span>
		<br /><br />	
		<div id="mapa_mesas">
			<table id="tabela_mapa_mesas" border="1" width="95%" align="center" cellspacing="20">
				<caption>Lista de mesas:</caption>
				<tr>
					<td id="mesa_livre">01</td>
					<td id="mesa_livre">02</td>
					<td id="mesa_livre">03</td>
					<td id="mesa_livre">04</td>
				</tr>
				<tr>
					<td id="mesa_livre">05</td>
					<td id="mesa_reservada">06</td>
					<td id="mesa_livre">07</td>
					<td id="mesa_livre">08</td>
				</tr>
				<tr>
					<td id="mesa_livre">09</td>
					<td id="mesa_livre">10</td>
					<td id="mesa_ocupada">11</td>
					<td id="mesa_livre">12</td>
				</tr>
			</table>
			<br />
			<div class="mensagem_mapa_mesas">Toque em uma das mesas para reservá-la.</div>
			<br />
		</div>
		<br />
		<div id="legenda_mesas">
			Legenda:
			<br /><br />
			<span id="mesa_livre" style="padding: 5px; border-radius: 10px; ">Verde</span>: Mesa livre<br /><br />
			<span id="mesa_reservada" style="padding: 5px; border-radius: 10px; ">Amarelo</span>: Mesa reservada<br /><br />
			<span id="mesa_ocupada" style="padding: 5px; border-radius: 10px; ">Vermelho</span>: Mesa ocupada<br /><br />
		</div>
		<br />
		<div id="video_lanchonete">
			<video src="sandwich.mp4" controls="controls" preload="metadata" poster="poster.jpg" width="216" height="162"></video>		
		</div>
		<div id="rodape">© 2012 Magnus Systems</div>
	</body>
</html>